import React from 'react'
import {
  useNavigate,
  useLocation,
  useSearchParams,
  useParams
} from 'react-router-dom'

const Index = () => {
  const params = useParams()
  const location = useLocation()
  // search 获取search字符串对象
  // setSearch 函数 => 用来修改当前地址栏中的search字符串
  const [search, setSearch] = useSearchParams()
  // 编程式导航
  // navigate(-1) 回退
  // navigate('/') => push / navigate('/',{state:1,replace:true}) => replace
  const navigate = useNavigate()

  console.log('params', params)
  // console.log('search', search.get('name'))
  const query = Object.fromEntries(search.entries())
  console.log('search', query)
  console.log('state', location.state)

  return (
    <div>
      <h3>详情页面</h3>
      <button
        onClick={() => {
          navigate('/')
        }}
      >
        返回首页
      </button>
      <button
        onClick={() => {
          // setSearch('name=321')
          // setSearch({ name: 333 })
          setSearch({ ...query, page: 2 })
        }}
      >
        修改当前的search字符串
      </button>
    </div>
  )
}

export default Index
